import tpl from './index.tpl';
import './index.scss';
import tools from '../../utils/tools';
import { BoardTitle } from './board_title';
import { ContentItem } from './content_item';
import { BtnGroup } from './btn_group';
import { DetailModel } from '../../models/detail';

class DetailBoard {
  constructor (el, phoneData) {
    this.name = 'detail';
    this.$el = el;
    this.phoneData = phoneData;
    this.detailModel = new DetailModel();
  }
  init () {
    this.initPhoneData();
    this.render();
    this.initUserPhoneInfo();
    this.bindEvent();
  }
  render () {
    const boardTitle = new BoardTitle(),
          contentItem = new ContentItem(),
          btnGroup = new BtnGroup(),
          phoneData = this.phoneData,
          colors = phoneData.color,
          versions = phoneData.version_info,
          pics = phoneData.pics;

    let versionList = '',
        colorList = '';

    colors.forEach((item, idx) => {
      colorList += contentItem.tpl(item, null, pics[idx][idx][0], phoneData.phone_name, idx);
    })
    versions.forEach((item, idx) => {
      versionList += contentItem.tpl(item.version, item.price, null, phoneData.phone_name, idx);
    })
    this.$el.append(tools.tplReplace(tpl(), {
      pic_url: pics[0][0][0],
      phone_name: phoneData.phone_name,
      slogan: phoneData.slogan,
      default_price: phoneData.default_price,
      title_1: boardTitle.tpl('手机版本'),
      title_2: boardTitle.tpl('手机颜色'),
      colors: colorList,
      versions: versionList,
      btnGroup: btnGroup.tpl()
    }))
  }
  initPhoneData () {
    this.phoneData.color = $.parseJSON(this.phoneData.color);
    this.phoneData.version_info = $.parseJSON(this.phoneData.version_info);
    this.phoneData.pics = $.parseJSON(this.phoneData.pics);
  }
  initUserPhoneInfo () {
    const phoneData = this.phoneData,
          versions = phoneData.version_info[0];
    this.userPhoneInfo = {
      id: phoneData.id,
      name: phoneData.phone_name,
      link: window.location.href,
      price: versions.price,
      version: versions.version,
      color: phoneData.color[0],
      img: phoneData.pics[0][0][0]
    }
  }
  bindEvent () {
    const $versions = this.$el.find('.J_versions'),
          $colors = this.$el.find('.J_colors'),
          $btnGroup = this.$el.find('.J_btnGroup');

    this.versionItems = $versions.children('.content-item');
    this.colorsItems = $colors.children('.content-item');
    this.$detailPic = this.$el.find('.J_detailPic');

    $versions.on('click', '.content-item',{_this: this}, this.onVersionsClick);
    $colors.on('click', '.content-item', {_this: this}, this.onColorsClick);
    $btnGroup.on('click', '.detail-btn', {_this: this}, this.onBtnsClick);
  }

  onVersionsClick (ev) {
    const e = ev || window.event,
          _this = e.data._this;

    _this.versionChange(this);
  }
  versionChange (target) {
    const $target = $(target),
          curIdx = $target.index();

    this.userPhoneInfo.version = $target.attr('data-content');
    this.userPhoneInfo.price = $target.attr('data-price');
    this.versionItems.eq(curIdx).addClass('current')
                     .siblings('.content-item').removeClass('current');
    console.log(this.userPhoneInfo)
  }
  onColorsClick (ev) {
    const e = ev || window.event,
          _this = e.data._this;
    
    _this.colorChange(this);
  }
  colorChange (target) {
    const $target = $(target),
          curIdx = $target.index();

    this.userPhoneInfo.color = $target.attr('data-content');
    this.userPhoneInfo.img = $target.attr('data-pic');
    this.$detailPic.attr('src', this.userPhoneInfo.img);
    this.colorsItems.eq(curIdx).addClass('current')
                    .siblings('.content-item').removeClass('current');
    console.log(this.userPhoneInfo)
  }
  onBtnsClick (ev) {
    const e = ev || window.event,
          _this = e.data._this,
          field = $(this).attr('data-field');
    switch (field) {
      case 'purchase':
        _this.purchase();
        break;
      case 'add-to-cart':
        _this.addToCart();
        break;
      default:
        break;
    }
  }
  purchase () {
    this.detailModel.purchase(this.userPhoneInfo, true, () => {
      window.location.href = 'order.html';
    });
  }
  addToCart () {
    this.detailModel.addToCart(this.userPhoneInfo, () => {
      window.location.href = 'cart.html';
    });
  }
}
export { DetailBoard }